<template>
  <div class="dialog">
    <Partition
      ref="partitionRef"
      :model-value="foldStore.chatPartitionValue"
      disabled
      :left-min-width="CHANNEL_LIST_MAX_WIDTH"
      :left-max-width="CHANNEL_LIST_MAX_WIDTH"
      :hidden-last="foldStore.hideChatContent"
      @change="handleChange">
      <template #left>
        <ChannelList></ChannelList>
      </template>
      <template #right>
        <ChatContent></ChatContent>
      </template>
    </Partition>
    <FloatWindow
      v-for="item in floatWindowStore.windows"
      :key="item.uid"
      :win="item"
      :title="item.title"
      @close="closeDialog">
      <router-view></router-view>
    </FloatWindow>
  </div>
</template>

<script setup>
import useEventBus from '@/use/use-event-bus'
import useFold, { CHANNEL_LIST_MAX_WIDTH } from '@/store/fold'
import { useFloatWindow } from '@/store/float-window'

const router = useRouter()
const route = useRoute()
const eventBus = useEventBus()
const floatWindowStore = useFloatWindow()

function closeDialog() {
  router.replace(`/chat${route.query.channelId ? `?channelId=${route.query.channelId}` : ''}`)
}

const partitionRef = ref(null)
const foldStore = useFold()

function handleChange({ container1Per }) {
  foldStore.setChatPartitionValue(container1Per)
}

onMounted(() => {
  foldStore.setChatPartition(partitionRef)
})
</script>

<style lang="scss" scoped>
.dialog {
  height: 100%;
  display: flex;
  border-radius: var(--elp-border-radius-16);
  background-color: var(--elp-bg-color);
  overflow: hidden;
  :deep(.fiz-eim-dialog) {
    .fiz-eim-dialog-body {
      padding: 0;
    }
  }
}
</style>
